<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/header.css" rel="stylesheet" />

	</head>

	<body>
		<header class="mui-bar mui-bar-nav title">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: white;"></a>
			<a id="open_menu" class="mui-icon mui-icon-right-nav mui-pull-right" style="color: white;">...</a>
			<h1 class="mui-title title-color">个人头像</h1>
		</header>
		<div class="mui-content">
			<img id="img_my_face" src="image/face-default-cat.png" />
		</div>
		<div id="sheet_myface" class="mui-popover mui-popover-bottom mui-popover-action ">
			<!-- 可选择菜单 -->
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a id="link_choose_photo" href="#">选择照片</a>
				</li>
				<li id="link_save_photo" class="mui-table-view-cell">
					<a href="#">下载照片</a>
				</li>
			</ul>
			<!-- 取消菜单 -->
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="#sheet_myface"><b>取消</b></a>
				</li>
			</ul>
		</div>

		<script src="js/mui.min.js"></script>
		<script src="js/app.js"></script>
		<script type="text/javascript">
			mui.init()
			mui.plusReady(function() {

				refreshFace();
				// 添加自定义事件，刷新头像
				window.addEventListener("refresh", function() {
					refreshFace();
				});

				//获取手机端可见屏幕的宽度
				var imgWidth = document.body.clientWidth;
				img_my_face.width = imgWidth;
				img_my_face.height = imgWidth;
				//绑定选择菜单
				var open_menu = document.getElementById("open_menu");
				open_menu.addEventListener("tap", function() {
					mui("#sheet_myface").popover("toggle");
				});
				//绑定选择照片的菜单按钮
				var link_choose_photo = document.getElementById("link_choose_photo");
				link_choose_photo.addEventListener("tap", function() {
					mui.openWindow({
						url: "plugin/v3.1.6/myface-uploader.html",
						id: "myface-uploader.html",
						createNew: true
					});
					mui("#sheet_myface").popover("toggle");
				});
				//绑定保存照片的菜单按钮
				var link_save_photo = document.getElementById("link_save_photo");
				link_save_photo.addEventListener("tap", function() {
					alert("保存照片");
				});
				function refreshFace() {
					var user = app.getUserGlobalInfo();
					var img_my_face = document.getElementById("img_my_face");

					if(user != null) {
						var faceImage = user.faceImageBig;
						if(app.isNotNull(faceImage)) {
							img_my_face.src = app.imgServerUrl + faceImage;
						}
					}
				}
			
			});
		</script>
	</body>

</html>